<template>
  <div class="container">
    <!-- 搜索部分 -->
    <div class="search">
      <div class="loge">
        <img
          class="loge-img"
          src="../../assets/images/header-loge.png"
          alt="logeicon"
          @click="Topage()"
        />
      </div>
      <div class="search-all">
        <el-input
          class="search-input"
          placeholder="请输入内容"
          v-model="searchinput"
          clearable
          @keyup.enter.native="searchText(searchinput)"
        >
          <el-button
            class="search-button"
            type="primary"
            slot="append"
            icon="el-icon-search"
            @click="searchText(searchinput)"
            >搜索</el-button
          >
        </el-input>

        <!-- <el-input class="search-input"
                          placeholder="请输入内容"
                          v-model="searchinput"
                          clearable
                          @keyup.enter.native="searchText(searchinput)"> </el-input> -->
      </div>
      <div class="search-banner">
        <el-carousel height="80px" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="(item, index) in bannerlist" :key="index">
            <a :href="item.link" target="_blank">
              <img class="loge-img" :src="item.imgsrc" alt="bannericon" />
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 中间链接 -->
    <div class="middle-net">
      <div class="middle-list">
        <div
          class="middle-link"
          v-for="(item, index) in middlelist"
          :key="index"
        >
          <el-link
            :href="item.link"
            target="_blank"
            :class="[item.id > 10 ? 'addhiden' : '']"
            >{{ item.name }}</el-link
          >
        </div>
      </div>
    </div>
    <!-- 中间精推推荐栏 -->
    <div class="hot-topic">
      <transition name="hot">
        <div
          class="move-table"
          v-show="showhot"
          ref="mySlick"
          v-if="hotlist.length > 0"
        >
          <!-- <slick ref="slickthree" :options="MidslickOptions"> -->
          <div
            class="nuit-table"
            v-for="(item, index) in hotlist"
            :key="index"
            v-show="addmiddlediv"
            @click="ToMessageDetails(item.id, item.cate_id)"
          >
            <div class="img-table">
              <img class="hot-img" :src="item.imgsrc" alt="热点精选" />
            </div>
            <div class="text-table">
              <p class="table-p textOut">{{ item.text }}</p>
            </div>
          </div>
        </div>
        <div class="move-table" v-else>
          <div class="add_nodiv" v-show="!addmiddlediv">
            <div class="img-table">
              <img
                class="hot-img"
                src="../../assets/images/no_text.jpg"
                alt="热点精选"
              />
            </div>
            <div class="text-table">
              <p class="table-p textOut">暂无数据！</p>
            </div>
          </div>
        </div>
      </transition>
      <div class="close-hot">
        <div class="add-hotdiv" @click="showhotHide()">
          <p>
            {{ closetext }}
            <i
              class="el-icon-arrow-right"
              :class="[showhot == true ? 'addrotateX' : 'addrotateX2']"
            ></i>
          </p>
        </div>
      </div>
    </div>
    <!-- 热门导航 -->
    <div class="site-all">
      <div class="site-map">
        <div class="site-list">
          <div
            class="site-link"
            v-for="(item, index) in sitelist"
            :key="index"
            :class="[item.id == 0 ? 'addsite' : '']"
          >
            <el-link
              :href="item.link"
              target="_blank"
              :underline="false"
              :class="[index > 11 ? 'addhiden' : '']"
              >{{ item.name }}</el-link
            >
          </div>
        </div>
      </div>
      <div class="site-classify">
        <div class="site-top">
          <div
            class="top-list"
            v-for="(item, index) in siteclassify"
            :key="index"
          >
            <el-link :href="item.link" :underline="false" target="_blank">{{
              item.name
            }}</el-link>
          </div>
        </div>

        <div class="site-detail">
          <div
            class="classify-table"
            v-for="(items, index) in siteclassify"
            :key="index"
          >
            <div
              class="every-table"
              v-for="(item, indexone) in items.everyclassify"
              :key="indexone"
            >
              <el-link
                :href="item.link"
                target="_blank"
                :underline="false"
                :class="[indexone > 10 ? 'addhiden' : '']"
                >{{ item.name }}</el-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--热点精推 -->
    <div class="new-push">
      <div class="hot-spot">
        <div class="spot-title">
          <div
            class="spot-table"
            v-for="(item, index) in spotlist"
            :key="index"
            :class="item.cate_id == leftcolorCode ? 'add_color' : ''"
            @click="searchClass(item.cate_id, item.name)"
          >
            <p class="linkclass" :value="item.cate_id">{{ item.name }}</p>
          </div>
          <div
            class="spot-table  addpadding"
            @click="ToMessageList(1, leftcolorCode)"
          >
            <el-button class="addbutton" plain size="small"
              >更多<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>

        <div class="spot-content" v-if="leftlist.length > 0">
          <!-- <slick ref="slicktwo" :options="LeftslickOptions"> -->
          <div
            class="spot-hotlist"
            v-for="(item, index) in leftlist"
            :key="index"
            @click="ToMessageDetails(item.id, item.cate_id)"
          >
            <div class="hotlist-table">
              <div class="hotlist-conimg">
                <el-image
                  class="hotlist-img"
                  :src="item.imgsrc"
                  fit="cover"
                ></el-image>
              </div>
              <div class="new-title ">
                <p class="textOut">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="add_spot_div" v-else>
          <div class="hotlist-table">
            <div class="hotlist-conimg">
              <el-image
                class="hotlist-img"
                :src="spot_img"
                fit="cover"
              ></el-image>
            </div>
            <div class="new-title ">
              <p class="textOut">暂无数据！</p>
            </div>
            <div class="new-text textOut"></div>
          </div>
        </div>
      </div>
      <!-- 精推 -->
      <div class="pure-push">
        <div class="pure-title">
          <div class="pure-icon" @click="backtoggle(movestauts)">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div class="pure-middletitle">
            <div id="addmove" class="pure-content">
              <div
                class="pure-table"
                v-for="(item, index) in purelist"
                :key="index"
                :class="item.cate_id == rightcolorCode ? 'add_color' : ''"
                @click="searchpureClass(item.cate_id, item.name)"
              >
                <p class="linkclass" :value="item.cate_id">{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="pure-icon" @click="toggle(movestauts)">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="addpadding" @click="ToMessageList(2, rightcolorCode)">
            <el-button class="addbutton" plain size="small"
              >更多<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>

        <div class="pure-list" v-if="rightlist.length > 0">
          <!-- <slick ref="slickone" :options="slickOptions"> -->
          <div
            class="pure-hotlist"
            v-for="(item, index) in rightlist"
            :key="index"
            @click="ToMessageDetails(item.id, item.cate_id)"
          >
            <div class="purelist-table">
              <div class="purelist-img">
                <el-image
                  class="purelist-img"
                  :src="item.imgsrc"
                  fit="cover"
                ></el-image>
              </div>
            </div>
            <div class="purelist-details">
              <div class="purelist-title textOut">
                <p class="textOut">{{ item.title }}</p>
              </div>
              <div class="purelist-text textOut">{{ item.text }}</div>
              <div class="purelist-name textOut">
                {{ item.name }} {{ item.date }}
              </div>
            </div>
          </div>
          <!-- </slick> -->
        </div>
        <div class="add_pure-list" v-else>
          <div class="pure-hotlist">
            <div class="purelist-table">
              <div class="purelist-img">
                <el-image
                  class="purelist-img"
                  :src="spot_img"
                  fit="cover"
                ></el-image>
              </div>
            </div>
            <div class="purelist-details">
              <div class="purelist-title textOut">
                <p class="textOut">暂无数据！</p>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="distpicker">
      <v-distpicker
        province="广东省"
        city="广州市"
        area="海珠区"
      ></v-distpicker>
    </div>
  </div>
</template>
<script>
//import "../../ElementUI/tqw_widget_float.js";
import { throttle } from "../../common/public.js";
import VDistpicker from "v-distpicker";
//import Slick from "vue-slick";
export default {
  components: {
    //slick: Slick
    VDistpicker
  },
  data() {
    return {
      searchinput: "",
      bannerlist: [],
      middlelist: [],
      showhot: true,
      hotlist: [],
      closetext: "点击收起",
      sitelist: [],
      siteclassify: [],
      spotlist: [],
      purelist: [],
      leftlist: [],
      rightlist: [],
      movestauts: 0,
      leftcolorCode: 3,
      rightcolorCode: 12,
      hotname: "热点",
      goodname: "精推",
      addmiddlediv: true,
      add_no_spot: true,
      spot_img: require("../../assets/images/no_text.jpg"),
      //轮播图参数
      slickOptions: {
        slidesToShow: 6, //显示个数
        slidesToScroll: 1, //一次轮播个数
        autoplay: true, //自动播放
        autoplaySpeed: 3000, //播放间隔
        vertical: true, //垂直播放
        arrows: false //箭头
        //infinite:true,//循环播放
        //prevArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>上一篇</button>",
        //nextArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>下一篇</button>",
      },
      LeftslickOptions: {
        slidesToShow: 4, //显示个数
        slidesToScroll: 1, //一次轮播个数
        autoplay: true, //自动播放
        autoplaySpeed: 3000, //播放间隔
        vertical: true, //垂直播放
        arrows: false, //箭头
        infinite: true, //循环播放
        lazyLoad: "ondemand"
        //prevArrow: "<button type='button' class=' slick-prevArrow-2 slick-next slick-arrow'>上一篇</button>",
        //nextArrow: "<button type='button' class=' slick-prevArrow-2 slick-next slick-arrow'>下一篇</button>",
      },

      MidslickOptions: {
        slidesToShow: 10, //显示个数
        slidesToScroll: 1, //一次轮播个数
        autoplay: true, //自动播放
        autoplaySpeed: 3000, //播放间隔
        arrows: false //箭头
      }
    };
  },
  created() {
    //搜索广告链接
    this.getserchLinks();
    //中间链接
    this.getMiddleLink();
    //热门导航接口
    this.getTopnavigation();
    //热点精推接口
    this.getSpotlist();
    //精推
    this.getPurelist();
    //热点文章接口
    this.getSpottext(3);
    //精推文章接口
    this.getPuretext(12, 12);
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f6f6f6");
  },
  methods: {
    //控制中间列表状态
    //点击展开收起
    showhotHide() {
      let _this = this;
      _this.showhot = !_this.showhot;
      if (_this.showhot == true) {
        _this.closetext = "点击收起";
      } else {
        _this.closetext = "点击展开";
      }
    },
    //精推信息左边滚动
    toggle(num) {
      let _this = this;
      let len = _this.purelist.length;
      if (len - num > 11) {
        _this.movestauts = num + 1;
        let addmove = document.getElementById("addmove");
        addmove.style.position = "absolute";
        addmove.style.left = num * -55 + "px";
      }
    },
    //精推信息右边滚动
    backtoggle(num) {
      let _this = this;
      if (num > 0) {
        _this.movestauts = num - 1;
        let addmove = document.getElementById("addmove");
        addmove.style.position = "absolute";
        addmove.style.left = (num - 1) * -55 + "px";
      }
    },
    //搜索广告链接
    getserchLinks() {
      let _this = this;
      _this.bannerlist = [];
      let Url = "/adv";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            for (let i = 0; i < 4; i++) {
              if (adddata[i].pos == 2) {
                _this.bannerlist.push({
                  id: adddata[i].id,
                  imgsrc: adddata[i].pic,
                  link: adddata[i].link
                });
              }
            }

            break;
          case 1002:
            break;
        }
      });
    },
    //获取中间链接接口
    getMiddleLink() {
      let _this = this;
      _this.middlelist = [];
      let Url = "/link?type=2&page=1&limit=10";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            switch (adddata.current_page) {
              case 1:
                let middledata = adddata.data;
                for (var i = 0; i < middledata.length; i++) {
                  _this.middlelist.push({
                    id: middledata[i].orderby - 1,
                    name: middledata[i].name,
                    link: middledata[i].link
                  });
                }
                break;
            }
            break;
          case 1002:
            break;
        }
      });
    },
    //热门导航接口
    getTopnavigation() {
      let _this = this;
      _this.sitelist = [];
      _this.siteclassify = [];

      let Url = "/website";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            for (var i = 0; i < adddata.length; i++) {
              if (adddata[i].orderby == 1) {
                _this.sitelist.push({
                  id: 0,
                  name: adddata[i].name,
                  link: adddata[i].link
                });
                for (var j = 0; j < adddata[i].tcate.length; j++) {
                  _this.sitelist.push({
                    id: adddata[i].tcate[j].orderby,
                    name: adddata[i].tcate[j].name,
                    link: adddata[i].tcate[j].link
                  });
                }
              } else {
                let userclass = [];
                for (var j = 0; j < adddata[i].tcate.length; j++) {
                  userclass.push({
                    id: adddata[i].tcate[j].orderby,
                    name: adddata[i].tcate[j].name,
                    parentlevel: adddata[i].tcate[j].pid,
                    link: adddata[i].tcate[j].link
                  });
                }
                this.siteclassify.push({
                  id: adddata[i].orderby - 1,
                  name: adddata[i].name,
                  link: adddata[i].link,
                  everyclassify: userclass
                });
              }
            }
            break;
          case 1002:
            break;
        }
      });
    },
    //热点列表接口
    getSpotlist() {
      let _this = this;
      this.spotlist = [];
      let Url = "/darticlecate?fcate=1&page=1&limit=5";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            switch (adddata.current_page) {
              case 1:
                let spotdata = adddata.data;

                for (var i = 0; i < spotdata.length; i++) {
                  this.spotlist.push({
                    id: spotdata[i].orderby,
                    name: spotdata[i].cate_name,
                    link: spotdata[i].link,
                    cate_id: spotdata[i].id
                  });
                }

                break;
            }
            break;
          case 1002:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //精推列表接口
    getPurelist() {
      let _this = this;
      _this.purelist = [];
      let Url = "/darticlecate?fcate=2&page=1&limit=100";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            switch (adddata.current_page) {
              case 1:
                let puredata = adddata.data;

                for (var i = 0; i < puredata.length; i++) {
                  _this.purelist.push({
                    id: puredata[i].orderby,
                    name: puredata[i].cate_name,
                    link: puredata[i].link,
                    cate_id: puredata[i].id
                  });
                }
                _this.purelist.push({
                  id: "",
                  name: "",
                  link: "",
                  cate_id: ""
                });

                break;
            }
            break;
          case 1002:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //热点文章接口
    getSpottext(cate_id) {
      let _this = this;
      _this.leftlist = [];
      let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100";
      let Params = {};
      this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            let adddata = resdata.data;
            switch (adddata.current_page) {
              case 1:
                let leftdata = adddata.data;
                for (var i = 0; i < leftdata.length; i++) {
                  if (leftdata[i].pos == 1) {
                    _this.leftlist.push({
                      id: leftdata[i].a_id,
                      cate_id: leftdata[i].cate_id,
                      title: leftdata[i].title,
                      text: leftdata[i].seo_keywords,
                      imgsrc: leftdata[i].thumb
                    });
                  }
                }
                if (_this.leftlist.length == 0) {
                  _this.add_no_spot = false;
                } else if (_this.leftlist.length > 4) {
                  for (var j = 0; j < 50; j++) {
                    // eslint-disable-next-line no-redeclare
                    for (var i = 0; i < leftdata.length; i++) {
                      if (leftdata[i].pos == 1) {
                        _this.leftlist.push({
                          id: leftdata[i].a_id,
                          cate_id: leftdata[i].cate_id,
                          title: leftdata[i].title,
                          text: leftdata[i].seo_keywords,
                          imgsrc: leftdata[i].thumb
                        });
                      }
                    }
                  }
                }
                // console.log(_this.leftlist.length)
                break;
            }
            break;
          case 1002:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //精推文章接口
    getPuretext(cate_id, num) {
      if (num == 12) {
        let _this = this;
        _this.rightlist = [];
        _this.hotlist = [];

        let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100";
        let Params = {};
        this.$https
          .fetchGet(Url, Params)
          .then(res => {
            let resdata = res.data;
            switch (resdata.code) {
              case 1000:
                let adddata = resdata.data;
                switch (adddata.current_page) {
                  case 1:
                    let rightdata = adddata.data;

                    for (var i = 0; i < rightdata.length; i++) {
                      if (rightdata[i].pos == 1) {
                        _this.rightlist.push({
                          id: rightdata[i].a_id,
                          cate_id: rightdata[i].cate_id,
                          title: rightdata[i].title,
                          text: rightdata[i].seo_keywords,
                          imgsrc: rightdata[i].thumb,
                          name: rightdata[i].name,
                          date: rightdata[i].created_at
                        });
                      } else {
                        _this.hotlist.push({
                          id: rightdata[i].a_id,
                          cate_id: rightdata[i].cate_id,
                          title: rightdata[i].title,
                          text: rightdata[i].title,
                          imgsrc: rightdata[i].thumb,
                          name: rightdata[i].name,
                          date: rightdata[i].created_at
                        });
                      }
                    }

                    if (_this.hotlist.length == 0) {
                      _this.addmiddlediv = false;
                    }

                    if (_this.rightlist.length > 6) {
                      for (var j = 0; j < 50; j++) {
                        for (var i = 0; i < rightdata.length; i++) {
                          if (rightdata[i].pos == 1) {
                            _this.rightlist.push({
                              id: rightdata[i].a_id,
                              cate_id: rightdata[i].cate_id,
                              title: rightdata[i].title,
                              text: rightdata[i].seo_keywords,
                              imgsrc: rightdata[i].thumb,
                              name: rightdata[i].name,
                              date: rightdata[i].created_at
                            });
                          }
                          // else {
                          //     _this.hotlist.push({
                          //         id: rightdata[i].a_id,
                          //         cate_id: rightdata[i].cate_id,
                          //         title: rightdata[i].title,
                          //         text: rightdata[i].title,
                          //         imgsrc: rightdata[i].thumb,
                          //         name: rightdata[i].name,
                          //         date: rightdata[i].created_at
                          //     });
                          // }
                        }
                      }
                    }

                    break;
                }
                break;
              case 1002:
                console.log(resdata.msg);
                break;
            }
          })
          .then(() => {
            this.init();
          })
          .catch(err => {});
      } else {
        let _this = this;
        _this.rightlist = [];
        //_this.hotlist = [];
        let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100";
        let Params = {};
        this.$https.fetchGet(Url, Params).then(res => {
          let resdata = res.data;
          switch (resdata.code) {
            case 1000:
              let adddata = resdata.data;
              switch (adddata.current_page) {
                case 1:
                  let rightdata = adddata.data;
                  for (var i = 0; i < rightdata.length; i++) {
                    if (rightdata[i].pos == 1) {
                      _this.rightlist.push({
                        id: rightdata[i].a_id,
                        cate_id: rightdata[i].cate_id,
                        title: rightdata[i].title,
                        text: rightdata[i].seo_keywords,
                        imgsrc: rightdata[i].thumb,
                        name: rightdata[i].name,
                        date: rightdata[i].created_at
                      });
                    } else {
                      // _this.hotlist.push({
                      //     id: rightdata[i].a_id,
                      //     title: rightdata[i].title,
                      //     text: rightdata[i].title,
                      //     imgsrc: rightdata[i].thumb,
                      //     name: rightdata[i].name,
                      //     date: rightdata[i].created_at
                      // });
                    }
                  }

                  if (_this.hotlist.length == 0) {
                    _this.addmiddlediv = false;
                  }

                  break;
              }
              break;
            case 1002:
              console.log(resdata.msg);
              break;
          }
        });
      }
    },
    // 热点列表切换
    searchClass(cate_id, cate_name) {
      this.leftcolorCode = cate_id;
      this.hotname = cate_name;
      this.add_no_spot = true;
      this.getSpottext(cate_id);
    },
    //精推文章切换
    searchpureClass(cate_id, cate_name) {
      this.rightcolorCode = cate_id;
      this.goodname = cate_name;

      this.getPuretext(cate_id, 0);
    },
    //搜索
    searchText: throttle(function(name) {
      if (name != "") {
        sessionStorage.setItem("SearchTextlist", name);
        this.$router.push("/SearchText");
      } else {
        this.showError("error", "请输入查询内容！");
      }
    }, 1000),
    //跳转文章详情
    ToMessageDetails(textid, cate_id) {
      this.$router.push("/MessageDetails");
      sessionStorage.setItem("Details", textid);
      sessionStorage.setItem("Details_cate_id", cate_id);
    },
    //精推热点分类跳转
    ToMessageList(num, listId) {
      sessionStorage.setItem("Detailslist", listId);
      if (num == 1) {
        this.$router.push({
          path: "/MessageList",
          // name: 'MessageList',
          // params: {
          //     name: this.hotname,
          //     id: listId
          // }
          query: {
            name: this.hotname,
            id: listId
          }
        });
      } else {
        this.$router.push({
          path: "/MessageList",
          path: "/MessageList",
          // name: 'MessageList',
          // params: {
          //     name: this.hotname,
          //     id: listId
          // }
          query: {
            name: this.goodname,
            id: listId
          }
        });
      }
    },
    //链接首页
    Topage() {
      this.$router.push("/");
    },
    //消息提示
    showError(type, status) {
      this.$message({
        type: type,
        showClose: true,
        center: true,
        message: status
      });
    },
    // Events listeners
    handleAfterChange(event, slick, currentSlide) {
      let Len = this.leftlist.length + 1;
      if (currentSlide == Len) {
      }
    }
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
};
</script>
<style lang="scss">
@import "../../assets/css/theme";
//@import '../../../node_modules/slick-carousel/slick/slick.css';
// @import '../../../node_modules/slick-carousel/slick/slick-theme.css';

.container {
  max-width: 1200px;
  width: 100%;
  min-width: 1000px;
  height: auto;
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 20px;
  //background: #fdfafe;
  .search {
    width: 100%;
    height: 96px;
    float: left;
    //  background: #212121;
    .loge {
      width: 230px;
      height: 78px;
      float: left;
      margin-left: 90px;
      margin-top: 1px;
      .loge-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
    .search-all {
      width: 43%;
      height: 40px;
      float: left;
      margin-top: 24px;
      margin-left: 5%;
      .search-input {
        width: 80%;
        height: 40px;
        float: left;
        margin-right: 4px;
        border: 1px solid #dfc2bf;
        .el-input__inner {
          width: 100%;
          height: 40px;
          border: none;
        }
      }
      .el-input-group__append,
      .el-input-group__prepend {
        background-color: #ffffff;
        color: #909399;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: none;

        border-radius: 4px;
        padding: 0 20px;
        width: 1px;
        white-space: nowrap;
      }
      .search-button {
        width: 78px;
        height: 42px;
        background: #558ffb;
        border: none;
        border-left: 1px solid #dfc2bf;
        border-radius: 3px;
        float: left;
        color: #ffffff;
      }
    }

    .search-banner {
      width: 22%;
      height: 76px;
      // background: rgba(147, 147, 147, 1);
      border-radius: 100px;
      float: right;
      margin-top: 10px;
      .loge-img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .middle-net {
    width: 100%;
    min-width: 1;
    background: #ffffff;
    font-size: 15px;
    float: left;
    margin-top: 15px;
    position: relative;
    .middle-list {
      width: 100%;
      height: 100%;
      background: #fbfbfb;
      float: left;
      text-align: center;
      overflow: hidden;
      .middle-link {
        width: 10%;
        height: 33px;
        float: left;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 33px;
        color: #333333;
      }
      .el-link.el-link--default {
        color: #333333;
      }
      .el-link.el-link--default :hover {
        color: #558ff8;
      }
    }
  }

  .hot-topic {
    width: 100%;
    height: auto;
    background: #ffffff;
    float: left;
    overflow: hidden;

    .move-table {
      width: 1200px;
      height: 135px;
      float: left;
      .nuit-table {
        width: 120px;
        height: 135px;
        padding-left: 12px;
        padding-top: 8px;
        float: left;
        cursor: pointer;
        .img-table {
          width: 96px;
          height: 96px;
          border-radius: 6px 6px 0px 0px;
          .hot-img {
            width: 100%;
            height: 100%;
            //object-fit: fill;
            //object-fit: contain;
            object-fit: cover;
            //object-fit: none;
            //object-fit: scale-down;
          }
        }
        .text-table {
          width: 96px;
          height: 35px;
          background: rgba(251, 251, 251, 1);
          text-align: left;
          padding-top: 9px;

          .table-p:hover {
            color: #558ffb;
            text-decoration: underline;
          }
        }
      }
    }
    .add_nodiv {
      width: 120px;
      height: 120px;
      margin-top: 5px;
      margin-left: 550px;
      cursor: pointer;
      .img-table {
        width: 96px;
        height: 96px;
        border-radius: 0px 0px 0px 0px;
        overflow: hidden;
        .hot-img {
          width: 100%;
          height: 100%;
          //object-fit: fill;
          //object-fit: contain;
          object-fit: cover;
          //object-fit: none;
          //object-fit: scale-down;
        }
      }
      .text-table {
        width: 96px;
        height: 35px;
        padding-left: 8px;
        padding-top: 5px;
        background: rgba(251, 251, 251, 1);
        text-align: center;
        color: #cac1c1;
        padding-top: 9px;
        table-p :hover {
          color: #558ffb;
          text-decoration: underline;
        }
      }
    }

    .close-hot {
      width: 100%;
      height: 40px;
      text-align: center;
      float: left;
      color: #333333;
      .add-hotdiv {
        width: 80px;
        height: 100%;
        margin: auto;
        cursor: pointer;
        padding-top: 8px;
        line-height: 30px;
      }
    }

    .hot-enter {
      opacity: 0;
    }

    .addrotateX {
      transform: rotate(90deg);
      transition: transform 0.5s ease 0s;
    }
    .addrotateX2 {
      transform: rotate(-90deg);
      transition: transform 0.5s ease 0s;
    }

    .add-hidden {
      display: none;
    }

    .hot-enter {
      opacity: 0;
      height: 0;
    }
    .hot-enter-active {
      transition: height 0.6s;
    }
    .hot-leave-to {
      opacity: 0;
      height: 0;
    }
    .hot-leave-active {
      transition: height 0.6s;
    }
  }

  .site-all {
    width: 100%;
    height: 251px;
    margin-top: 20px;

    float: left;
    background: #ffffff;
    .site-map {
      width: 100%;
      height: 33px;
      padding-left: 30px;
      background: rgba(251, 251, 251, 1);
      border: 1px solid rgba(229, 230, 233, 1);
      font-size: 15px;

      float: left;

      position: relative;
      .site-list {
        width: 100%;
        // min-width: 1000px;
        height: 100%;

        float: left;
        text-align: left;
        overflow: hidden;
        .site-link {
          width: 8%;
          height: 33px;
          float: left;
          font-weight: 400;
          letter-spacing: 1px;
          line-height: 28px;
        }
        .addsite {
          font-size: 20px;
          .el-link.el-link--default {
            color: #558ff8;
            font-weight: 600;
          }
          .el-link.el-link--default :hover {
            color: #ff6f64;
          }
        }

        .el-link.el-link--default {
          color: #333333;
        }
        .el-link.el-link--default :hover {
          color: #558ff8;
        }
      }
    }
    .site-classify {
      width: 100%;
      height: 212px;
      padding-top: 6px;
      background: #ffffff;
      overflow-y: scroll;
      padding-left: 30px;
      .site-top {
        width: 8%;
        height: auto;
        float: left;
        text-align: left;
        .top-list {
          width: 100%;
          height: 33px;
          float: left;
          overflow: hidden;
          margin-top: 3px;
          font-weight: 600;
        }
        .el-link.el-link--default {
          color: #558ff8;
          font-weight: 550;
        }
        .el-link.el-link--default :hover {
          color: #ff6f64;
        }
      }
      .site-detail {
        width: 92%;
        height: auto;
        float: left;
        .classify-table {
          width: 100%;
          height: 33px;
          margin-top: 3px;
          text-align: left;
          .every-table {
            width: 8.83%;
            height: 33px;
            float: left;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 18px;
            overflow: hidden;
          }
          .el-link.el-link--default {
            color: #333333;
          }
          .el-link.el-link--default :hover {
            color: #558ff8;
          }
        }
      }
    }
  }
  .new-push {
    width: 100%;
    min-width: 1122px;
    height: 900px;
    // background: #f0faf9;
    margin-top: 20px;
    margin-bottom: 10px;
    float: left;
    .hot-spot {
      width: 35%;
      height: 100%;
      float: left;
      margin-right: 10px;
      background: #ffffff;
      border: 1px solid #f4f4f6;
      overflow: hidden;
      .spot-title {
        width: 100%;
        height: 40px;
        background: #fbfbfb;
        border-bottom: 1px solid #f4f4f6;
        float: left;
        margin-bottom: 10px;
        .spot-table {
          width: 16.6%;
          height: 100%;
          float: left;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
          letter-spacing: 1px;
          cursor: pointer;
        }
        .linkclass {
          line-height: 40px;
        }
        .linkclass :hover {
          color: #ffffff;
        }
      }
      .el-link.el-link--default {
        color: #333333;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: 1px;
      }
      .el-link.el-link--default :hover {
        color: #558ff8;
      }
      .addpadding {
        padding-top: 5px;

        .addbutton {
          width: 45px;
          height: 25px;
          margin: 3px 0 0 0;
          padding: 0 30px 0px 15px;
          span {
            margin: 0px 0 0px -10px;
          }
        }
      }

      .spot-content {
        width: 100%;
        height: 850px;
        float: left;
        .slick-prevArrow-2 {
          margin-right: 175px;
          width: 65px;
          height: 25px;
          margin-top: 8px;
          margin-bottom: 8px;
          border-radius: 2px;
          background: #f6f6f6;
        }
        .slick-prevArrow-2:hover {
          background: #558ff8;
        }
        .spot-hotlist {
          width: 100%;
          height: 210px;
          float: left;
          padding: 1px 13px 0 12px;
          text-align: left;

          cursor: pointer;
          .hotlist-table {
            width: 100%;
            height: 162px;
            float: left;
            .hotlist-conimg {
              width: 100%;
              height: 100%;
              float: left;
              .hotlist-img {
                width: 100%;
                height: 100%;
                // padding-right: 200px;

                //object-fit: fill;
                //object-fit: contain;
                //object-fit: cover;
                //object-fit: none;
                //object-fit: scale-down;
              }
            }

            .new-title {
              width: 100%;
              margin: 0px 0 0px 0;
              padding: 0 12px;
              // padding-bottom: 10px;

              height: 40px;
              line-height: 40px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 12px;
              text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
              float: left;
              background: #f6f6f6;
              p {
                line-height: 40px;
              }
            }
            .new-title :hover {
              color: #558ffb;
              text-decoration: underline;
            }
            .new-text {
              width: 100%;
              height: 28px;
              font-size: 14px;
              padding-left: 12px;
              padding-right: 5%;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 22px;
              text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
              float: left;
              overflow: hidden;
              border-bottom: 1px solid #f6f6f6;
            }
          }
        }
      }

      .add_spot_div {
        width: 100%;
        height: 610px;
        float: left;
        padding: 170px 13px 0 12px;
        text-align: left;
        cursor: pointer;
        .hotlist-table {
          width: 100%;
          height: 622px;
          float: left;
          .hotlist-conimg {
            width: 150px;
            height: 150px;
            margin: 0 auto;

            .hotlist-img {
              width: 100%;
              height: 100%;
              // padding-right: 200px;

              //object-fit: fill;
              //object-fit: contain;
              //object-fit: cover;
              //object-fit: none;
              //object-fit: scale-down;
            }
          }

          .new-title {
            width: 100%;
            margin: 10px 0 10px 0;
            padding-left: 12px;

            height: 20px;
            line-height: 20px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cac1c1;
            line-height: 12px;
            text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
            text-align: center;
            float: left;
            p {
              line-height: 20px;
            }
          }

          .new-text {
            width: 100%;
            height: 22px;
            font-size: 14px;
            padding-left: 12px;
            padding-right: 5%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
            text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
            float: left;
            overflow: hidden;
          }
        }
      }
    }
    .pure-push {
      width: 64.1%;
      height: 100%;
      float: left;
      background: #ffffff;
      border: 1px solid #f4f4f6;
      .pure-title {
        width: 100%;
        height: 40px;
        background: #fbfbfb;
        border-bottom: 1px solid #f4f4f6;
        overflow: hidden;
        padding-left: 5px;
        float: left;
        .pure-icon {
          height: 25px;
          width: 25px;
          margin-top: 2px;
          float: left;
          color: #333333;
          line-height: 36px;
          font-size: 18px;
          cursor: pointer;
        }
        .pure-middletitle {
          width: 610px;
          height: 40px;
          //border-bottom: 1px solid #f4f4f6;
          overflow: hidden;
          margin-left: 5px;
          float: left;
          position: relative;
          #addmove {
            position: absolute;
            top: 0px;
            left: 0px;
          }
          .pure-content {
            width: 2000px;
            height: 100%;
            overflow: hidden;
            position: absolute;
            left: 0px;
            float: left;

            .pure-table {
              width: 2.75%;
              height: 97%;
              float: left;
              text-align: center;
              font-size: 16px;
              font-weight: 600;
              line-height: 22px;
              letter-spacing: 1px;

              cursor: pointer;
              .linkclass {
                line-height: 40px;
              }
              .linkclass :hover {
                color: #ffffff;
              }
            }
            .el-link.el-link--default {
              color: #333333;
              text-align: center;
              font-size: 16px;
              font-weight: 600;
              line-height: 40px;
              letter-spacing: 1px;
            }
            .el-link.el-link--default :hover {
              color: #558ff8;
            }
          }
        }
        .addpadding {
          margin-top: 5px;
          width: 57px;
          height: 25px;
          float: left;
          .addbutton {
            width: 45px;
            height: 25px;
            margin: 3px 0 0 0;
            padding: 0 30px 0px 15px;
            span {
              margin: 0px 0 0px -10px;
            }
          }
        }
      }
      .pure-list {
        width: 100%;
        height: 100%;
        padding-top: 2px;
        overflow: hidden;
        position: relative;

        .slick-prevArrow {
          margin-right: 345px;
          width: 65px;
          height: 25px;
          margin-top: 8px;
          margin-bottom: 8px;
          border-radius: 2px;
          background: #f6f6f6;
        }
        .slick-prevArrow:hover {
          background: #558ff8;
        }
        .pure-hotlist {
          width: 100%;
          height: 140px;
          float: left;
          padding: 9px 10px 8px 10px;
          border-bottom: 1px solid #f6f6f6;
          cursor: pointer;
          .purelist-table {
            width: 24.3%;
            height: 122px;
            border-radius: 5px;
            float: left;
            .purelist-img {
              width: 100%;
              height: 100%;
            }
          }
          .purelist-details {
            width: 72.3%;
            height: 121px;
            padding: 0px 12px 0px 10px;
            float: left;
            margin-left: 10px;
            text-align: left;
            .purelist-title {
              width: 100%;
              height: 40px;
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 20px;
              float: left;
              text-align: left;
            }
            .purelist-title :hover {
              color: #558ffb;
              text-decoration: underline;
            }
            .purelist-text {
              width: 100%;
              height: 40px;
              font-size: 14px;
              color: #999999;
              float: left;
              text-align: left;
              overflow: hidden;
            }
            .purelist-name {
              width: 100%;
              height: 20px;
              float: left;
              color: #999999;
              text-align: left;
              margin-top: 27px;
            }
          }
        }
      }

      .add_pure-list {
        width: 100%;
        height: 620px;
        overflow: hidden;
        .pure-hotlist {
          width: 100%;
          height: 139px;
          float: left;
          padding: 170px 0px 0px 11px;
          cursor: pointer;
          .purelist-table {
            width: 150px;
            height: 150px;
            margin: 0 auto;

            .purelist-img {
              width: 100%;
              height: 100%;
            }
          }
          .purelist-details {
            width: 72.3%;
            height: 121px;
            padding: 9px 12px 17px 10px;
            float: left;
            margin-left: 10px;
            text-align: center;
            .purelist-title {
              width: 100%;
              height: 40px;
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #cac1c1;
              line-height: 40px;
              padding-left: 210px;
              float: left;
              text-align: center;
            }

            .purelist-text {
              width: 100%;
              height: 40px;
              font-size: 14px;
              color: #999999;
              float: left;
              text-align: left;
              overflow: hidden;
            }
            .purelist-name {
              width: 100%;
              height: 20px;
              float: left;
              color: #999999;
              text-align: left;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}

.add_color {
  color: #558ff8;
  font-size: 20px;
  border-bottom: 1px solid #558ff8;
}

.textOut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addhiden {
  display: none;
}

.distpicker {
  width: 600px;
  height: 300px;
  float: left;
}
</style>
